<template>
  <common-edit-dialog
    :title="title"
    :visible.sync="open"
    @cancel="cancel"
    @submit="submitForm"
    :buttonLoading="buttonLoading"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="55px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="noticeTitle">
            <common-input
              v-model="form.noticeTitle"
              :maxlength="48"
              placeholder="请输入标题"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="内容" prop="noticeContent">
            <common-editor
              :height="200"
              :supportFontSize="[
                '14px',
                '16px',
                '18px',
                '20px',
                '24px',
                '28px',
                '32px',
              ]"
              v-model="form.noticeContent"
              :isSupportImage="true"
            ></common-editor>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="附件" prop="files">
            <file-upload
              v-model="form.files"
              :fileSize="100"
              multiple
              :limit="10"
              ref="fileUpload"
              :initFileList="initFileList"
            ></file-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import {
  noticeAdd,
  noticeEdit,
  fetchPublicInfo,
} from "@/api/system/publicNotice";
import CommonEditor from "@/components/CommonEditor";
import FileUpload from "@/components/FileUpload";
export default {
  components: {
    CommonEditor,
    FileUpload,
  },
  data() {
    return {
      buttonLoading: false,
      title: "",
      open: false,
      rules: {
        noticeTitle: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        noticeContent: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
      },
      form: {
        noticeTitle: "",
        noticeContent: "",
        files: null,
      },
      initFileList: [],
      formData: new FormData(),
      overLimit: false,
    };
  },
  methods: {
    show(data) {
      this.open = true;
      this.title = data.noticeId ? "编辑" : "新增";
      if (data.noticeId) {
        this.form = {
          noticeId: data.noticeId,
          noticeTitle: data.noticeTitle,
          noticeContent: data.noticeContent,
        };
        if (data.fileName && data.fileName.length > 0) {
          data.fileName.forEach((item) => {
            item.name = item.fileName;
          });
          this.initFileList = data.fileName;
        } else {
          this.initFileList = [];
        }
      } else {
        this.form = this.$options.data().form;
        this.initFileList = [];
      }
    },

    submitForm() {
      if (this.form.noticeContent === "<p><br></p>") {
        this.form.noticeContent = "";
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const files = this.$refs.fileUpload.$refs.upload.uploadFiles;
          console.log(files);

          const formData = new FormData();
          formData.append("noticeTitle", this.form.noticeTitle);
          formData.append("noticeContent", this.form.noticeContent);

          if (this.form.noticeId) {
            formData.append("noticeId", this.form.noticeId);
          }

          if (files && files.length > 0) {
            try {
              files.forEach((item) => {
                this.overLimit = this.$refs.fileUpload.handleBeforeUpload(item);
                if (this.overLimit) throw Error("isOver");
              });
            } catch (e) {}

            if (this.overLimit) {
              return;
            }

            files.forEach((item) => {
              if (item.raw) {
                formData.append("files", item.raw);
              }
              if (item.fileUrl) {
                formData.append("noticeFile", JSON.stringify(item));
              }
            });
          }

          this.buttonLoading = true;

          if (this.form.noticeId) {
            noticeEdit(formData)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("编辑成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            noticeAdd(formData)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("保存成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("保存失败", res.msg);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .common-editor,
.ql-toolbar {
  font-size: 14px;
}
</style>
